<template>
  <div class="person">
    <el-container style="height:600px">
      <el-header>个人中心</el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height:600px"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group title="购物车">
              <el-menu-item index="1-3" @click="getdata($event)">商品</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="2" @click="getdata($event)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="getdata($event)">
            <i class="el-icon-s-shop"></i>
            <span slot="title">我的店铺</span>
          </el-menu-item>
          <el-menu-item index="4" @click="getdata($event)">
            <i class="el-icon-setting"></i>
            <span slot="title">管理店铺</span>
          </el-menu-item>
          <el-menu-item index="5" @click="getdata($event)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">返回首页</span>
          </el-menu-item>
        </el-menu>
        </el-aside>
          <el-main><component :is="comName"></component></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import infor from '../views/infomation.vue'
import manageShop1 from '../views/ManageSupermaket.vue'
import MyShop from '../views/MyShop.vue'
import Vue from 'vue'
Vue.component('info',infor)
Vue.component('manageShop1',manageShop1)
Vue.component('MyShop',MyShop);
export default {
  data(){
    return{
      comName:'info'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },  
    getdata($event){
        switch($event._props.index){
            case '1-1': 
            this.$router.push('/collection');
            break;
            case '1-2': 
             this.$router.push('/collection');
             break;
            case '1-3': 
            this.axios.post("/api/shopping/getUserGoods.php",{'userid':this.$store.state.userID}).then(res=>{
              console.log(res.data);
              this.$store.dispatch('setUserGoodsinfo',res.data);
               this.$router.push('/shopCar');
            });
            break;
            case '2':
                    if(this.$store.state.username==""){
                      this.$router.push('/login');
                    } else{
                          this.comName = 'info';
                      }
                    break;
            case '3': 
            if(this.$store.state.username==""){
              this.$router.push('/login');
            }else{
              let marketname = {
                'market_name':this.$store.state.marketName
              };
              this.axios.post("/api/shopping/myGoods.php",marketname).then(res=>{
                if(res.data=="error"){
                  alert("服务器繁忙，请稍后重试");
                }else if(res.data==""){
                  alert("对不起，没有贵店的商品");
                }else{
                  this.$store.dispatch('setMyGoods',res.data);
                  this.comName="MyShop";   
                }
              });
              
            }
              break;
            case '4':
                    console.log(this.$store.state.marketName);
                    this.comName = 'manageShop1'; 
                    console.log(this.$store.state.marketType);
                    console.log(this.$store.state.marketPhone);
                    break;
            case '5': this.$router.push('/');
                      break;
        }
    }
  }
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.person {
  height: 600px;
}
.el-menu-vertical-demo {
  padding-top: 60px;
}
</style>